<template>
    <div class="rotation_contaienr">
        <Swiper
            :modules="modules"
            :autoplay="autoplay"
            :freeMode="freeMode"
            :pagination="pagination"
            :navigation="navigation"
            :loop="loop"
            :style="{
                height: height + 'px'
            }"
        >
            <SwiperSlide
                v-for="item in 4"
                :key="item"
            >
                <div class="item">
                    这是第{{item}}张轮播图
                </div>
            </SwiperSlide>
        </Swiper>
    </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import {
    Autoplay, // 自动切换
    FreeMode, // 自由模式
    EffectFade, // 淡入淡出
    Pagination, // 小圆点
    Navigation, // 导航栏
} from 'swiper';
import 'swiper/css';
import 'swiper/css/autoplay';
import "swiper/css/pagination";
import "swiper/css/navigation";

const modules = [Autoplay, FreeMode, EffectFade, Pagination, Navigation]

const props = defineProps({
    loop: {
        type: Boolean,
        default: true,
    },
    pagination: {
        type: Boolean,
        default: true,
    },
    autoplay: {
        type: Boolean,
        default: false,
    },
    freeMode: {
        type: Boolean,
        default: false,
    },
    navigation: {
        type: Boolean,
        default: true,
    },
    height: {
        type: String,
        default: '300',
    },
})
// registerConfig.register({
//     type: '轮播图',
//     label: '风格一',
//     key: 'rotation_one',
//     preview: '',
//     render: ({props} = {}) => {
//         return <RotationOne
//             height={props?.height.value}
//             loop={props?.loop.value}
//             pagination={props?.pagination.value}
//             // autoplay={props?.autoplay.value}
//             freeMode={props?.freeMode.value}
//             navigation={props?.navigation.value}
//         ></RotationOne>
//     },
//     props: {
//         height: createProgressBar('模块高度', '300', 500, 250),
//         loop: createSwitch('是否循环', true),
//         pagination: createSwitch('底部圆点', true),
//         freeMode: createSwitch('自由模式', false),
//         navigation: createSwitch('左右箭头', true),
//     }
// })

</script>

<style lang="scss" scoped>
.rotation_contaienr{
    width: 100%;
}

.swiper{
    width: 100%;
}

.item{
    height: 100%;
    width: 100%;
    font-size: 36px;
    text-align: center;
}
</style>